import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux'
import * as service from '../../../../api/zynindex'
import * as asset from '../../../../api/ningindex'
import { Button, Layout, Table, theme, Input, Form, Select, DatePicker, Tag, Space, Modal, message, notification } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import '../List/List.scss'

const { Header, Content, Sider } = Layout;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { Search } = Input;


interface Props {

}
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}
function List(props: Props) {
    // 对话框
    const [modal2Open, setModal2Open] = useState(false);

    var dispatch = useDispatch()
    // 跳转路由到新增页面
    var navigate = useNavigate();
    var toAdd = () => {
        navigate('/index/assets/assetmanagement/list/addthing')
    }
    var [tableData, setTableData] = useState([ ])

    const [open, setOpen] = useState(false);
    const [openid, setOpenId] = useState('');
    // 取消
    const showModal = () => {
        setOpen(false);
    };
    //确定   
    const hideModal = () => {
        delete_one(openid)
        setOpen(false);
    };
    const del = (id: any) => {
        setOpen(true);
        setOpenId(id)
    }
    const columns = [
        {
            title: '资产名称',
            dataIndex: 'work',
            key: 'work',
            render: (_: any, record: any) => <a>{record.zcName}</a>,
        },
        {
            title: '资产编码',
            dataIndex: 'use',
            key: 'use',
            render: (_: any, record: any) => {
                return <>
                    {record.zcNum}
                </>
            },//动态渲染标签/组件
        },
        {
            title: '资产状态',
            dataIndex: 'type',
            key: 'type',
            render: (_: any, record: any) => <Tag color="success">{record.zcState}</Tag>,
        },
        {
            title: '所属类别',
            dataIndex: 'text',
            key: 'text',
            render: (_: any, record: any) => {
                return <>
                    {record.zcSort}
                </>
            },//动态渲染标签/组件
        },
        {
            title: '计量单位',
            dataIndex: 'text',
            key: 'text',
            render: (_: any, record: any) => {
                return <>{record.zcUnit } </>
            },//动态渲染标签/组件
        },
        {
            title: '购入价格(元)',
            dataIndex: 'text',
            key: 'text',
            render: (_: any, record: any) => {
                return <>
                    {record.zcPrice}
                </>
            },//动态渲染标签/组件
        },
        {
            title: '所属部门',
            dataIndex: 'text',
            key: 'text',
            render: (_: any, record: any) => {
                return <>
                    {record.zcBranch}
                </>
            },//动态渲染标签/组件
        },
        {
            title: '存放仓库',
            dataIndex: 'text',
            key: 'text',
            render: (_: any, record: any) => {
                return <>
                    {record.zcWarehouse}
                </>
            },//动态渲染标签/组件
        },
        {
            title: '购入日期',
            dataIndex: 'text',
            key: 'text',
            render: (_: any, record: any) => {
                return <>
                    {record.zcDate}
                </>
            },//动态渲染标签/组件
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render: (_: any, record: any) => {
                return <>
                    <Space>
                        <a onClick={() => { toAdd() }}>编辑</a>
                        <a onClick={() => { del(record.id) }}>删除</a>
                        <Modal
                            title="删除确认"
                            centered
                            style={{top:20}}
                            open={open}
                            onOk={hideModal}
                            onCancel={showModal}
                            okText="确认"
                            cancelText="取消">
                            <p >资产信息删除后无法恢复,确定要删除此资产信息吗?</p>
                        </Modal>
                    </Space>
                </>
            },
        },
    ];


    const [form] = Form.useForm();
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const onSearch = (value: string) => console.log(value);

    // 获取资产列表
    var asset_list = async () => {
        var res = await asset.asset_list();
        console.log(res.data);
        //遍历每个商品id, 给它添加key属性
        res.data.map((item: any) => {
            item.key = item.proid;
        })
        setTableData(res.data);
    }
    useEffect(() => {
        asset_list();
    }, [])

    // var asset_list = async () => {
    //     var res = await service.asset_list();
    //     console.log(res.data);
    //     //遍历每个商品id, 给它添加key属性
    //     res.data.map((item: any) => {
    //         item.key = item.proid;
    //     })
    //     setTableData(res.data);
    // }
    // useEffect(() => {
    //     asset_list();
    // }, [])

    // 删除资产列表
    var delete_one = async (id: any) => {
        // console.log(id);
        var res = await asset.delete_one({ id })
        console.log(res);
        if (res.status == 200) {
            notification.success({ message: '删除资产成功!' })
        } else {
            notification.error({ message: '删除资产失败!' })
        }
        asset_list();
    }

    // 搜索资产
    // const handleChange =  async (value: string) => {
    //         var res= await service.asset_search({status:value})
    //         console.log(res);
    //         setTableData(res.data);
       
    //   };
    return (
        <div className='list'>
            <Content style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background: colorBgContainer,
            }} >
                <div className="shang">
                    <div className="line"> </div>
                    <div className="set">资产列表</div>
                </div>
                <div className="zhong">
                    <div className='zhuangtai'>
                        <div className="t1">资产状态</div>
                        <Form style={{ maxWidth: 200 }}>
                            <Form.Item rules={[{ required: true }]} >
                                <Select
                                   defaultValue="请选择"
                                    allowClear
                                    // onChange={handleChange}
                                >
                                    <Option value="闲置">闲置</Option>
                                    <Option value="在用">在用</Option>
                                    <Option value="借用">借用</Option>
                                    <Option value="盘亏">盘亏</Option>
                                </Select>
                            </Form.Item>
                        </Form>
                    </div>
                    <div className='bumen'>
                        <div className="t1">所属部门</div>
                        <Form style={{ maxWidth: 200 }}>
                            <Form.Item rules={[{ required: true }]} >
                                <Select
                                    placeholder="请选择"
                                    allowClear
                                    // onChange={handleChange}
                                >
                                    <Option value="male">产品部</Option>
                                    <Option value="use">研发部</Option>
                                </Select>
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="date">
                        <div className="t1">购入日期</div>
                        <Form>
                            <Form.Item>
                                <RangePicker />
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="btn">
                        <Button type="primary" onClick={() => { toAdd() }}><PlusOutlined /> 新增资产</Button>
                        <Button >导入</Button>
                        <Button >导出</Button>
                        <Button >全部删除</Button>
                    </div>
                </div>
                <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 300 }} />
                <Table columns={columns} dataSource={tableData} />
            </Content>
        </div>
    );
}

export default List;